
<!DOCTYPE HTML>

<html>

<head>
	<meta charset="utf-8">
	<title>网页设计——简介 - 前端艺术</title>
	<meta name="author" content="Nicholas">

	
	<meta name="description" content="网页设计——简介 网页设计不同于其他任何类型的媒介设计。它所需要的必备技能，有时会让你感到吃惊。而需要丰富的实战经验，这是毫无疑问的。网页设计吸引着各个领域的设计师们，从工程师设计到建筑设计，从产品设计到平面设计。本章将会简要介绍一下当前设计行业的概况，还有网页设计在设计领域中扮演的角色。 &hellip;">
	

  <!-- http://t.co/dKP3o1e -->
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1">

	<link href="/atom.xml" rel="alternate" title="前端艺术" type="application/atom+xml">
	
	<link rel="canonical" href="http://xiebaochun.github.io/blog/2013/09/09/design-for-the-web-getting-started/">
	<link href="/favicon.png" rel="shortcut icon">
	<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
	<link href="/stylesheets/font-awesome.min.css" media="screen, projection" rel="stylesheet" type="text/css">
	<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">

</head>


<body>
	<div class="container">
		<div class="left-col">
			<div class="intrude-less">
			<header id="header" class="inner"><div class="profilepic">
<!--the weather pugin-->
    <script defer src="http://julying.com/lab/weather/v3/jquery.weather.build.min.js?parentbox=body&moveArea=all&zIndex=1&move=1&drag=1&autoDrop=1&styleSize=big&style=_random&area=client&city=%E5%8C%97%E4%BA%AC"></script>
	<script src="/javascripts/md5.js"></script>
	<script type="text/javascript">
		$(function(){
			$('.profilepic').append("<img src='https://si0.twimg.com/profile_images/378800000316979686/061b0d73fe1b9cc3a643a68bcb077161.jpeg' alt='Profile Picture' style='width: 160px;' />");
		});
	</script>
</div>
<hgroup>
  <h1><a href="/">前端艺术</a></h1>
  
    <h2>one blog for games.</h2>
  
</hgroup>

<nav id="main-nav"><ul class="main-navigation">
  <li><a href="/">Home</a></li>
  <li><a href="/blog/archives">Archives</a></li>
  <li><a href="http://www.juerry.com/index.html">my lab</a></li>
</ul>


<section class="aboutme">
  <p>
    专注于移动开发
  </p>
</section>
</nav>
<nav id="sub-nav">
	<div class="social">
		
		
		
		<a class="twitter" href="http://twitter.com/xiebaochun" title="Twitter">Twitter</a>
		
		
		<a class="github" href="https://github.com/xiebaochun" title="GitHub">GitHub</a>
		
		
		
		
		
		
		
		
		<a class="rss" href="/atom.xml" title="RSS">RSS</a>
		
	</div>
</nav>
<section>
  <h1>Categories</h1>
    <ul id="category-list"><li><a href='/blog/categories/ios/'>ios (2)</a></li><li><a href='/blog/categories/other/'>other (14)</a></li><li><a href='/blog/categories/web/'>web (23)</a></li></ul>
</section>

</header>				
			</div>
		</div>	
		<div class="mid-col">
			
				
			
			<div class="mid-col-container">
				<div id="content" class="inner"><article class="post" itemscope itemtype="http://schema.org/BlogPosting">
	<h1 class="title" itemprop="name">网页设计——简介</h1>
	<div class="entry-content" itemprop="articleBody"><p>网页设计不同于其他任何类型的媒介设计。它所需要的必备技能，有时会让你感到吃惊。而需要丰富的实战经验，这是毫无疑问的。网页设计吸引着各个领域的设计师们，从工程师设计到建筑设计，从产品设计到平面设计。本章将会简要介绍一下当前设计行业的概况，还有网页设计在设计领域中扮演的角色。
<!--more-->
经常会有许多在校学生还有其他打算要从事网页设计的人，会问我怎么样开始进入网页设计这个行业。</p>

<p>“怎样找到我的第一份工作？”，“你觉得在我找工作之前我需要学习那些专业技能？”，“如果我要成为一名网页设计师，我在学校要学些什么课程或者技能？”。这就是他们经常会问到的问题。好的，从哪里开始？也许你是一名程序员（或者是一名前端开发人员）想提升自己的设计品位。也许你是一名广告设计师，想转行。但是，我不想一开始就告诉你在学校需要学习那些课程，或者那些软件你学要学习，而是先介绍一下web的现状、过去和未来。</p>

<p>当我开始开始学习网页设计时就被它的即时性所吸引了。我从事过喷绘广告设计的工作，设计出来的作品在电脑上的色彩表现和打印出来的往往有偏差，造成此问题的因素很多，比如机械的操作、故障等。所以即使在电脑上呈现的效果让客户满意了，但是不见得最后打印出来的成品会让客户满意。进行网页设计时，我可以随时随意地改变任何东西，当客户觉得不满意时，我可以立即进行修改任何需要的改善的地方。</p>

<p>1997年，网页设计在平面设计领域创造了一次革命。随后导致大量的具有创作思维的专业人士向这个新兴领域进军。从作家到设计师，所有发现这个新兴领域的人们都感到无比的激动和兴奋。但是我们犯了一个错误，就是把”什么是网页“给理解错了。一个简单的网页其实就是一张HTML表单。HTML数据表单应该是包含行和列的单元格数据表单，其使用可视化语言和平面设计师使用的Quark Xpress语言是一样的。它们都是表格（grids)。当时所有的网站的网页都是以这种形式组成的。</p>

<h3 id="section">浏览器发展</h3>

<p>浏览器是我们访问网站页面的一个窗口。网页浏览器使用HTTP协议向服务器发送请求来显示页面。当webk开始成为一个主流媒介时，各大浏览器厂商开始了抢夺其浏览器的市场份额的大战。这导致了许多厂商开发其特有的技术来处理不同类型的媒体。结果就是没有一个标准的编码规范。通过Web Stands Project和W3C的不懈努力，现在的情况变得更多好了。这些浏览器厂商听取了开发者和设计师们的建议，与W3C合作开发了令人兴奋的浏览器开发工具，例如font-embedding。</p>

<p>在网页里互动、搜索、娱乐、交流，可能是大部分浏览器共同特点。但是逐渐地，网页可以被其他设备和应用所访问。离线和在线的分界线就变得模糊起来了。</p>

<p>当然，用户可以使用邮件来寻找他们的web活动。通过邮件通知（可能来自博客，论坛，web应用和服务）你可以和web进行互动。你可以不用打开浏览器就可以很轻松的寻找一个话题参与讨论。</p>

<p>通过调用相关API(应用程序编程接口），其他的应用程序可以访问web上的数据，并将其显示到其他地方。可以将web带到桌面上。我经常使用的一个应用是Flickr Uploader。这是一个iPhoto的小插件，它可以将我的文件夹里的图片上传到我的Flicker在线账户中。通过这个账户，可以将这些图片分享给我的家人和朋友。Flickr Uploader通过使用Flickr API来实现这些功能。为了确保将这些图片上传到真确的位置，给这些图片去一个名字和其他的一些备注信息，再执行上传，我并没有打开我的浏览器来做这件事。</p>

<p>到目前为止，我只是在讨论通过电脑来访问web。当然，还有其他很多的渠道可以访问web上的内容，从手机、PDA到电视、游戏机等。</p>

<p>iPhone是最吸引我的一个设备了（因为我有一台，哈哈）。并不仅仅是因为它的他具有一个很好的用户体验的web浏览器，而且它还有许多与web相关的iPhone应用程序。比如FaceBook，我比较偏向于使用web版本的应用。还有其他的应用，比如Twitter客户端。在我的IMac里，我使用Twitter(一个OSX应用），而在我的iPhone里使用的事TwitterFon。我很少使用web浏览器来登录我的Twitter账户。</p>

<p>我想传达的观念是web并不仅仅局限于Internet Explorer(IE)或者FireFox。从你的移动设备到你的Playstation3,web存在于任何地方。</p>

<h3 id="section-1">用户的变化</h3>

<p>10年前，很多人使用web，但是主要偏向于年轻人、男性，对技术感性兴趣的这些人。5年后，用户的数量发生了惊人的变化。很多人使用web来购买礼物或者预定暑期机票。博客也诞生了，它改变的了新闻媒介的传播方式和人们获取消息的习惯。现在，5年过去了，我妈妈已经在使用FaceBook了。web已经从一个发布信息的媒介转变成成了一个工具和丰富人们业余生活的一个应用。现在具有广大的用户群体。这个技术得到了广泛的应用，这是让人无比的激动！但是，随着这个速度的改变，我们怎么确保我们现在设计的网页和六个月之前设计的网页能保持相同的新意和创意。</p>

<p>现在网页设计中的搜索功能变得更加重要。通过发掘用户可能要访问的网址和搜集用户习惯数据，我们可以根据他们的需求进行设计。我们不能假设所有的用户都是一样的。因为作为一名设计师，我们要站在用户的角度来进行合理的设计。用户在的习惯在不断的变化，我们也要与时俱进。</p>

<h3 id="section-2">设计师的变化</h3>

<p>web技术发展的非常快。今天最新的东西，六个月后就过时了。为了赶上潮流，一个设计师不仅需要掌握当前的流行趋势，还必须成为产品和服务的用户。</p>

<p>拿Twitter做个比方。Twitter是一个web应用程序，你可以使用它告诉其他人你订阅了谁、谁订阅了你，还有你在做什么。下面是Twitter的官方介绍：</p>

<p>“Twitter is a service for friends, family, and co–workers to communicate and stay connected through the exchange of quick, frequent answers to one simple question: what are you doing?”</p>

<p>2006年07月，Twitter第一次发布，我并没有使用它。但是我还是在使用Email与朋友进行交流，并且我有自己的一个企业邮箱。为什么我会使用像Twitter这样服务？在相当长的时间里我并没有使用Twitter，因为我喜欢使用我熟悉的服务。但是当越来越多的博主们开始放弃博客的时候，这一切发生了变换。然后许多开始人员和设计师在博客上添加了web服务还有其他的一些产品：Twitter,Flickr，Delicious Link,You Tube,Vimeo等。然后博客设计成为了设计师们的新宠。并且，我错过了一个很麻的讨论。我们需要注意的一点是，最近我在做一个客户端的项目，使用到了这些服务和产品。设计规则开始产生了，在线媒体和新兴商业看到了其中的利润。现在假设我没有使用这些服务和产品，假设我不是一个web用户，我应该还是一个默默无名的小人物。千万不要活在过去的荣誉中。加入你是一个web设计师，你必须要成为一名web用户。</p>

<p>就像之前我提到的那样，有时要赶上流行趋势是挺困难的。一个web设计师的角色看起来像是被信息围绕着的建筑师，和用户体验设计，前后端的开发工具-如CSS,HTML。懂一点JavaScript和其他的一些脚本语言，如PHP，并且知道一个web工作是怎么的一个概念。不久之后所有的web设计师招聘都会要求刚才我提到这这些能力。但是我希望那天应该是在我们的后面。模板web设计就是任何地方都设计的很合理并且很经典。事实上，我个人是不会雇佣这些夸大海口说这些我都会东精通的人。web设计已经走向一个专业化的道路。</p>

<h3 id="web">web设计师需要成为专家</h3>

<p>要成为专业是很困难的，特别是对于你们这些新人或者在小公司里的人来说。你的老板可能会叫你学习其他领域的技能和知识。这种队新鲜事物非常感兴趣的性格会帮助你朝着正确的方向发展。但是，在所有的这些建议中，不要丢失了web设计师的核心理念。</p>

<p>作为一个web设计师必须要学会适应。愿意不断学习，并且敢于创新。一个web设计师必须充分发挥自己的设计潜能和灵感。我们必须学会接受别人的建议和意见，并且能轻松驾驭web的一些限制条件。必须时时刻刻保持独特的个人设计品位和设计的思维方式。</p>
</div>

</article>

	<div class="share">
	<div class="addthis_toolbox addthis_default_style ">
	
	
	<a class="addthis_button_tweet"></a>
	
	
	
	<!-- JiaThis Button BEGIN -->
<div class="jiathis_style_32x32">
	<a class="jiathis_button_qzone"></a>
	<a class="jiathis_button_tsina"></a>
	<a class="jiathis_button_tqq"></a>
	<a class="jiathis_button_weixin"></a>
	<a class="jiathis_button_renren"></a>
	<a href="http://www.jiathis.com/share?uid=1838235" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
	<a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript">
var jiathis_config = {data_track_clickback:'true'};
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1371541356556113" charset="utf-8"></script>
<!-- JiaThis Button END -->
<!-- UY BEGIN -->
<div id="uyan_frame"></div>
<script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=1838235"></script>
<!-- UY END -->
	
	<a class="addthis_counter addthis_pill_style"></a>
	</div>
  <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid="></script>
</div>


</div>
			</div>
			<footer id="footer" class="inner"><p>
  Copyright &copy; 2014 - Nicholas -
  <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>

Design credit: <a href="http://shashankmehta.in/archive/2012/greyshade.html">Shashank Mehta</a></footer>
			







  <script type="text/javascript">
    (function(){
      var twitterWidgets = document.createElement('script');
      twitterWidgets.type = 'text/javascript';
      twitterWidgets.async = true;
      twitterWidgets.src = '//platform.twitter.com/widgets.js';
      document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
    })();
  </script>





		</div>
	</div>
</body>
</html>
